<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon"
	href="${pageContext.request.contextPath}/images/favicon.ico">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style1.css">
<link href="css/popup-box.css" rel="stylesheet" type="text/css"
	media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Sign In And Sign Up Forms  Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>

</script>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/js/jquery.magnific-popup.js"
	type="text/javascript"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/modernizr.custom.53451.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/login.js"></script>
<script>

	$(document).ready(function() {
		$('.popup-with-zoom-anim').magnificPopup({
			type : 'inline',
			fixedContentPos : false,
			fixedBgPos : true,
			overflowY : 'auto',
			closeBtnInside : true,
			preloader : false,
			midClick : true,
			removalDelay : 300,
			mainClass : 'my-mfp-zoom-in'
		});

	});
</script>
<title>登录注册</title>
</head>
<body>
	<h1>登录和注册</h1>
	<div class="w3layouts">
		<div class="signin-agile">
			<h2>登录</h2>

			<input type="text" id="username" name="username" class="name"
				placeholder="用户名" required=""> <input type="password"
				id="password" name="password" class="password" placeholder="密码"
				required="">
			<ul>
				<li><input type="checkbox" id="brand1" value=""> <label
					for="brand1"><span></span>记住密码</label></li>
			</ul>
			<a href="#">忘记密码?</a><br>
			<div class="clear"></div>
			<input id="submit" type="submit" value="登录"> 
		</div>
		<div class="signup-agileinfo">
			<h3>注册用户</h3>
			<p>表单在网页应用中十分重要，今天我要向大家分享一款基于HMLT5的分步骤注册表单，表单外观比较华丽，点击下一步按钮即可跳转到下一步填写注册信息。改HTML5表单使用了很多CSS3属性，从而在表单切换时拥有弹性的动画，是一款很不错的HTML5表单。</p>
			<div class="more">
				<a class="book popup-with-zoom-anim button-isi zoomIn animated"
					data-wow-delay=".5s" href="#small-dialog">点击注册</a>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="footer-w3l">
		<p class="agileinfo">
			<a href="/Blog" target="_self">返回浏览</a>
		</p>
	</div>
	<div class="pop-up">
		<div id="small-dialog" class="mfp-hide book-form">
			<h3>注册表单</h3>
				<input type="text" id="regusername" name="username" placeholder="用户名" reg='^[\u4E00-\u9FA5A-Za-z0-9]{5,20}$' tip="5-20位字母或数字或汉字" state="0"/>
				<span style="color: red;" ></span>
				<input type="password" id="regpassword" name="password" class="password" placeholder="密码"  reg="^[a-zA-Z0-9]{8,15}$" tip="8-15位字母或数字" state="0" /> 
				<span style="color: red;" ></span>
				<input type="password" id="reppassword" name="reppassword" class="password" placeholder="重复密码" tip="两次密码不一样" tip1="请重复密码" state="0"/>
				<span style="color: red;" ></span>
				<input type="submit" id="regsubmit" value="点击注册">
		</div>
	</div>
<body>

</html>